<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="./css/aui-flex.css">
    <link rel="stylesheet" type="text/css" href="./css/aui.css">
    <link rel="stylesheet" type="text/css" href="./css/common.css">
    <style>
        /*脚部*/
        #homeFooter {
			background: #FFF;
            color: #333;
			box-shadow: 0 5px 13px rgba(0,0,0,0.5);
        }
        #homeFooter .active {
            color: #333;
        }

        #homeFooter .aui-bar-tab-item {
			padding-top: 0.1rem;
            height: 2.4rem;
        }
		#homeFooter .fTxt {
            font-size: 0.5rem;
			line-height: 1;
			margin-top: 0.2rem;
		}

        #homeFooter .fIco {
			height: 1rem;
			width: 100%;
			position: relative;
        }
		#homeFooter .fIco img {
			position: absolute;
			left: 50%;
			top: 0;
			width: auto;
			height: 100%;
			-webkit-transform: translate(-50%,0);
			transform: translate(-50%,0);
		}
		#homeFooter .fIco .ico_on {
			opacity: 0;
			visibility: hidden;
		}
		#homeFooter .active .fIco .ico_off {
			opacity: 0;
			visibility: hidden;
		}
		#homeFooter .active .fIco .ico_on {
			opacity: 1;
			visibility: visible;
		}
		#homeFooter .f_btn {
			padding: 0;
		}
		#homeFooter .f_btn .fIco {
			height: 100%;
		}
		#homeFooter .f_btn .fIco img {
			top: -0.5rem;
		}
    </style>
</head>
<body class="bg-none">
    <footer class="aui-bar aui-bar-tab" id="homeFooter">
        <div class="aui-bar-tab-item f_01 active" data-ind="0" tapmode onClick="openHome(0);">
            <div class="fIco">
            	<img class="ico_off" src="image/common/f_01_off.png" alt="">
            	<img class="ico_on" src="image/common/f_01_on.png" alt="">
            </div>
            <div class="fTxt">优选</div>
        </div>
        <div class="aui-bar-tab-item f_02" data-ind="1" tapmode onClick="openHome(1);">
            <div class="fIco">
            	<img class="ico_off" src="image/common/f_02_off.png" alt="">
            	<img class="ico_on" src="image/common/f_02_on.png" alt="">
            </div>
            <div class="fTxt">任务大厅</div>
        </div>
        <div class="aui-bar-tab-item f_btn" tapmode onClick="openPublish();">
            <div class="fIco">
            	<img src="image/common/f_btn.png" alt="">
            </div>
        </div>
        <div class="aui-bar-tab-item f_03" data-ind="2" tapmode onClick="openHome(2);">
            <div class="fIco">
            	<img class="ico_off" src="image/common/f_03_off.png" alt="">
            	<img class="ico_on" src="image/common/f_03_on.png" alt="">
            </div>
            <div class="fTxt">消息</div>
        </div>
        <div class="aui-bar-tab-item f_04" data-ind="3" tapmode onClick="openHome(3);">
            <div class="fIco">
            	<img class="ico_off" src="image/common/f_04_off.png" alt="">
            	<img class="ico_on" src="image/common/f_04_on.png" alt="">
            </div>
            <div class="fTxt">我的</div>
        </div>
    </footer>
</body>
<script type="text/javascript" src="./script/import.js"></script>
<script type="text/javascript" src="./script/common.js"></script>
<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();

    }; //apiready结束

    //切换主页面
    function openHome(ind) {
        $$('#homeFooter > div').removeClass('active');
		$$('#homeFooter > div[data-ind="'+ ind +'"]').addClass('active');
        api.execScript({
            name:'root',
            script:'openHome('+ ind +');'
        });
    }
    function openPublish(){
        setPrefs('_PUBLISH_LABEL_','');
        setPrefs('_PUBLISH_EDIT_ID_','');
        setPrefs('_PUBLISH_EDIT_CONTENT_','');
        setTimeout(function(){
            api.openWin({
                name: 'publish_win',
                url: 'html/publish/publish_win.html',
                bounces: false,
                slidBackEnabled: false,
                animation: {
                    type: 'movein',
                    subType:"from_bottom",
                    duration:300
                }
            });
        },50);

    }
</script>

</html>
